// hooks 封装逻辑，提供响应式数据。
import {
    useIntersectionObserver,
    useIntervalFn
} from '@vueuse/core'
import dayjs from 'dayjs'
import {
    ref,
    onUnmounted
} from 'vue'

/**
 *  监听dom元素进行入到可视区后的行为
 * @param {*} target 目标dom
 * @param {*} callback 处理的回调函数
 */
export const useLazyData = (target, callback) => {
    const {
        stop
    } = useIntersectionObserver(
        target, // 要监听的目标dom
        ([{
            isIntersecting
        }]) => {
            // 已经到达可视区
            if (isIntersecting) {
                // 不需要继续监听
                stop()

                // 要处理的回调函数
                callback && callback()
            }
        }
    )
}

/**
 * 支付倒计时函数
 */
export const usePayTime = () => {
    // 倒计时逻辑
    // 倒计时时间
    const time = ref(0)

    // 倒计时的时间信息
    const timeText = ref('')
    const {
        pause,
        resume
    } = useIntervalFn(() => {
            // 倒计时
            time.value--

                // 对时间进行处理

                timeText.value = dayjs.unix(time.value).format('mm分ss秒')

            if (time.value <= 0) {
                pause()
            }
        }, 1000, false)
        // 组件销毁时清除定时器
    onUnmounted(() => {
        pause()
    })

    // 开启定时器 countdown 倒计时时间
    const start = (countdown) => {
        time.value = countdown

        // 立即将当前的倒计时时间显示
        timeText.value = dayjs.unix(time.value).format('mm分ss秒')
        resume()
    }

    return {
        start,
        timeText
    }
}